<template>
	<view>
		<view
			v-if="
				[
					'AmountInput',
					'TextInput',
					'NumberInput',
					'TextareaInput',
				].includes(config.name)
			"
		>
			<view>
				{{ config.name === 'AmountInput' ? `${_value}元` : _value }}
			</view>
		</view>
		<view v-if="config.name === 'DateTime'">
			<view>{{ _value }}</view>
		</view>
		<view v-if="config.name === 'TimePicker'">
			<view>{{ _value }}</view>
		</view>
		<view v-if="config.name === 'TimeRangePicker'">
			<view>{{ _value ? _value.join(' ~ ') : '' }}</view>
		</view>
		<view v-if="config.name === 'DateTimeRange'">
			<view>{{ _value ? _value.join(' ~ ') : '' }}</view>
		</view>
		<view v-if="config.name === 'ImageUpload'" ref="form">
			<view v-if="!readonly">
				<diy-upload
					limit="6"
					@emitsUrl="getUploadFile($event)"
				></diy-upload>
			</view>
			<view v-else class="df ac flex-wrap">
				<view
					v-for="medium in _value"
					:key="medium.url"
					class="pct33 mb10"
					style="height: 200rpx"
				>
					<image
						style="width: 98%; height: 100%"
						:src="medium.url"
						v-if="medium.isImage"
						@tap="
							previewImage(
								_value.map((i) => i.url),
								medium.url
							)
						"
					></image>
					<video
						style="width: 98%; height: 100%"
						:src="medium.url"
						v-if="!medium.isImage"
					></video>
				</view>
			</view>
		</view>
		<view v-if="config.name === 'Provinces'">
			<view>
				<view>{{ _value }}</view>
			</view>
		</view>
		<view v-if="config.name === 'MultipleSelect'">
			<view>
				{{ _value && _value.length > 0 && _value.map((i) => i) }}
			</view>
		</view>
		<view v-if="config.name === 'SelectInput'">
			<view>{{ _value }}</view>
		</view>
		<view v-if="config.name === 'Score'">
			<view class="df ac">
				<uni-rate v-model="_value" :max="config.props.max"></uni-rate>
			</view>
			<view
				v-if="!$isNotEmpty(_value) || _value === 0"
				class="mt10 main-color"
				>{{ config.props.placeholder }}</view
			>
		</view>
		<view v-if="config.name === 'DeptPicker'">
			<view>
				<view v-if="_value && _value.length > 0">{{
					_value.map((i) => i.name).join(',')
				}}</view>
			</view>
		</view>
		<view
			v-if="config.name === 'Description'"
			style="color: #606266; font-size: 32rpx"
		>
			{{ config.props.placeholder || '只是一段说明文字' }}
		</view>
		<view
			v-if="config.name === 'SignPanel'"
			@tap="openPopup('SignPanel')"
			class="df jsb ac"
		>
			<view v-if="!_value" class="b2">请签名</view>
			<view v-else>
				<image
					style="
						width: 200rpx;
						height: 200rpx;
						transform: rotate(90deg);
					"
					:src="_value"
				></image>
			</view>
			<uni-icons
				v-if="!readonly"
				type="right"
				size="36rpx"
				color="#999999"
			/>
		</view>
		<view v-if="config.name === 'Location'">
			<view v-if="_value">{{ _value }}</view>
		</view>
		<view v-if="config.name === 'UserPicker'">
			<view class="df jsb ac">
				<!-- <view> -->
				<view v-if="_value && _value.length > 0">{{
					_value.map((i) => i.name).join(',')
				}}</view>
			</view>
		</view>
		<video
			style="width: 98%; height: 100%"
			:src="videoUrl"
			v-if="showVideo"
		></video>
	</view>
</template>

<script>
import { getFileName } from '@/common/utils'
export default {
	name: 'FormDesignRender',
	props: {
		name: {
			type: String,
			default: '',
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		value: {
			default: undefined,
		},
		config: {
			type: Object,
			default: () => {
				return {}
			},
		},
		placeholder: {
			type: String,
			value: '',
			default: '',
		},
		options: {
			type: Array,
			default: () => {
				return []
			},
		},
		expanding: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		_value: {
			get() {
				let arr = []
				if (this.config.props?.userSeal) {
					arr =
						this.value &&
						this.value.length > 0 &&
						this.value.map((i) => {
							return {
								...i,
								sealInfo:
									i.sealInfo && i.sealInfo
										? i.sealInfo
										: [
												{
													seal: {},
													pageNo: 1,
													keywords: '',
												},
										  ],
							}
						})
				} else {
					arr = this.value
				}
				this.fileDataHandler(arr)
				return arr
			},
		},
		optionsValues() {
			const arr =
				this.options &&
				this.options.length > 0 &&
				this.options.map((item) => {
					return {
						text: item,
						value: item,
					}
				})
			return arr
		},
	},
	data() {
		return {
			getFileName,
			inputPlaceholderList: new Map([
				['AmountInput', { text: '请输入金额', type: 'number' }],
				['TextInput', { text: '请输入内容', type: '' }],
				['NumberInput', { text: '请输入数值', type: 'number' }],
				['TextareaInput', { text: '请输入内容', type: 'textarea' }],
			]),
			placeholderStyle: 'color:#b2b2b2;font-size:26rpx',
			region: '',
			reginoObj: {},
			fileData: [],
			//日期时间
			dataTimeType: 'DateTime',
			beginDateTime: '',
			endDateTime: '',
			beginOrEndDateTime: 'beginDateTime',
			// 时间
			timeType: 'time',
			beginTime: '',
			endTime: '',
			beginOrEndTime: 'beginTime',
			formatDate: 'yyyy-MM-dd HH:mm',
			formatData: 'yyyy-MM-dd HH:mm',
			sealInfoValue: {},
			sealInfoIndex: 0,
			showVideo: false,
			videoUrl: '',
		}
	},
	methods: {
		fileDataHandler(arr) {
			this.fileData = arr?.length ? arr : []
		},
		previewImage(urls, pic) {
			uni.previewImage({
				current: pic,
				urls: urls,
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.w45 {
	width: 45%;
}
.b2 {
	color: #b2b2b2;
	font-size: 26prx;
}
</style>
